<template>
  <div>
    <div>
      <a href="https://ask.dxy.com/index#/ncov-vaccine?hasTriggerLogin=true"
        ><img
          src="https://img1.dxycdn.com/2020/1229/597/7753946610917775543-22.png"
          alt="" width="100%"
      /></a>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">选择城市</span>
        <el-cascader
          v-model="obj.pca"
          :options="pca"
          :props="{ label: 'name', value: 'name' }"
          @change="findData"
        ></el-cascader>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择接种时间" required>
          <el-col :span="11">
            <el-form-item prop="date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.date"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="工作类型" prop="leixing">
          <el-radio-group v-model="ruleForm.leixing">
            <el-radio label="医疗防疫人员"></el-radio>
              <el-radio label="边境口岸工作人员"></el-radio><br />
              <el-radio label="高污染区工作人员"></el-radio>
              <el-radio label="城市必要运行工作人员"></el-radio><br />
              <el-radio label="老人"></el-radio>
              <el-radio label="儿童"></el-radio>
              <el-radio label="孕妇"></el-radio>
              <el-radio label="普通人群"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申请理由" prop="reason">
          <el-input type="textarea" v-model="ruleForm.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即申请</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="wrapper">
      <div class="first_title">
        <div class="heard_title">新冠疫苗是一种什么药？</div>
        <div class="heard_title_0">
          新冠病毒疫苗（COVID~19
          Vaccine）是具有新型冠状病毒抗原特性的各种疫苗的总称……
        </div>
        <div class="rigth_0">
          <a href="https://m.dxy.com/article/32793">查看详情</a>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/287/5454091353547003443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">所有人都能接种？</div>
          <div class="title_0">
            接种新冠疫苗的效果如何？保护期有多久？可以和其他疫苗一起接种吗？
          </div>
          <div class="rigth">
            <a href="https://m.dxy.com/article/32794">查看详情</a>
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/100/2692837237616592443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">新冠疫苗分几种？</div>
          <div class="title_0">不同疫苗的优缺点是什么，该如何进行选择？</div>
          <div class="rigth">
            <a href="https://m.dxy.com/article/32795">查看详情</a>
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/250/8500963385917003443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">新冠病毒疫苗接种方法</div>
          <div class="title_0">新冠病毒疫苗接种频率？剂次？每次间隔多久？</div>
          <div class="rigth">
            <a href="https://m.dxy.com/article/32797">查看详情</a>
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/615/5768614065148003443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">疫苗不良反应</div>
          <div class="title_0">
            接种新冠病毒会出现哪些不良反应？该如何处理？
          </div>
          <div class="rigth">
            <a href="https://m.dxy.com/article/32798">查看详情</a>
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/111/2851271046976003443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">紧急上市的研发流程</div>
          <div class="title_0">国内疫苗的研发和上市进度怎么判断？</div>
          <div class="rigth">
            <a href="https://m.dxy.com/article/32796">查看详情</a>
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/1021/847/7136883021564592443-135.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">什么是新型冠状病毒</div>
          <div class="title_0">
            此次流行的冠状病毒为一种新发现的冠状病毒，国际病毒分类委员会命名为
            SARS-Cov-2。<br>因为人群缺少对新型病毒株的免疫力，所以人群普遍易感。
          </div>
          <div class="rigth">
            <a href="https://ask.dxy.com/ama/index#/disease/24677/info/0"
              >查看详情</a
            >
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/0126/335/3393120598787233917-66.png"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">帮你排除感染症状</div>
          <div class="title_0">
            出现什么症状可能感染了新型冠状病毒？如何在家做好自我隔离？
          </div>
          <div class="rigth">
            <a href="https://ask.dxy.com/ama/index#/disease/24677/info/1"
              >查看详情</a
            >
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/0126/584/3393140198870641951-73.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">冠状病毒怕什么？</div>
          <div class="title_0">
            那些人容易感染新型冠状病毒？什么人容易编程重症？新型冠状病毒致命性如何？
          </div>
          <div class="rigth">
            <a href="https://ask.dxy.com/ama/index#/disease/24677/info/2"
              >查看详情</a
            >
          </div>
        </div>
      </div>
      <div>
        <div class="first_title">
          <div>
            <img
              src="https://img1.dxycdn.com/2020/0127/314/3393234046053613437-73.jpg"
              width="130px"
              height="130px"
            />
          </div>
          <div class="title">做好预防免感染</div>
          <div class="title_0">
            人流密集的地方可以不带口罩吗？口罩能重复使用吗？煮沸后能使用吗？
          </div>
          <div class="rigth">
            <a href="https://ask.dxy.com/ama/index#/disease/24677/info/6"
              >查看详情</a
            >
          </div>
        </div>
      </div>
    </div>
    <div class="fixed">
      <div class="openAPP">打开APP查看更多数据</div>
    </div>
    <div>
      <a href="https://ncov.dxy.cn/ncovh5/view/pneumonia_rumors?target=5&from=dxy">
      <img src="https://img1.dxycdn.com/2020/1230/754/0075455809397795543-22.png" alt="" width="100%"></a>
    </div>
  </div>
</template>
<style scoped>
.openAPP {
  color: #fff;
  text-align: center;
  position: relative;
  top: 15px;
}
.fixed {
  position: fixed;
  bottom: 10px;
  background-color: #00c791;
  border: 1px solid #00c791;
  height: 50px;
  width: 1100px;
}
.title {
  font-size: 25px;
  color: #333;
  margin-left: 15px;
  position: relative;
  left: 130px;
  bottom: 130px;
}
.title_0 {
  padding-top: 5px;
  color: #666;
  position: relative;
  left: 130px;
  bottom: 130px;
  margin-left: 15px;
}
.first_title {
  width: 1200px;
  height: 182px;
  padding: 20px 20px;
  background-color: #fff;
  margin-top: 24px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
}
.rigth_0 {
  color: #4169e2;
  font-size: 16px;
  position: relative;
  top: 55px;
  left: 900px;
}
.rigth {
  color: #4169e2;
  font-size: 16px;
  position: relative;
  bottom: 65px;
  left: 900px;
}
.heard_title_0 {
  padding-top: 5px;
  color: #666;
}
.heard_title {
  font-size: 25px;
  color: #333;
  margin-top: 20px;
}
</style>


<script>
import pca from "../../assets/pca.json";
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      pca,
      obj: "",
      ruleForm: {
          region: '',
          type: [],
          leixing: '',
          reason: ''
        },
        rules: {
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          leixing: [
            { required: true, message: '请选择工作类型', trigger: 'change' }
          ],
          reason: [
            { required: true, message: '请填写申请理由', trigger: 'blur' },
            { min: 200, max: 2000, message: '请输入200-2000字理由', trigger: 'blur' }
          ]
        }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("申请成功!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 查找当前城市疫苗数量的方法
    findData() {
      
    },
  },
};
</script>